<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello MUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="__FRONT__/css/mui.min.css">
    <script src="__FRONT__/js/jquery-1.11.1.min.js"></script>
    <script src="__FRONT__/js/mui.min.js "></script>
    <script src="__FRONT__/js/mui.view.js "></script>
    <script src='__FRONT__/js/feedback.js'></script>
    <style>
        html,
        body {
            background-color: #efeff4;
        }
        .mui-views,
        .mui-view,
        .mui-pages,
        .mui-page,
        .mui-page-content {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background-color: #efeff4;
        }
        .mui-pages {
            top: 46px;
            height: auto;
        }
        .mui-scroll-wrapper,
        .mui-scroll {
            background-color: #efeff4;
        }
        .mui-page.mui-transitioning {
            -webkit-transition: -webkit-transform 300ms ease;
            transition: transform 300ms ease;
        }
        .mui-page-left {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
        .mui-ios .mui-page-left {
            -webkit-transform: translate3d(-20%, 0, 0);
            transform: translate3d(-20%, 0, 0);
        }
        .mui-navbar {
            position: fixed;
            right: 0;
            left: 0;
            z-index: 10;
            height: 44px;
            background-color: #f7f7f8;
        }
        .mui-navbar .mui-bar {
            position: absolute;
            background: transparent;
            text-align: center;
        }
        .mui-android .mui-navbar-inner.mui-navbar-left {
            opacity: 0;
        }
        .mui-ios .mui-navbar-left .mui-left,
        .mui-ios .mui-navbar-left .mui-center,
        .mui-ios .mui-navbar-left .mui-right {
            opacity: 0;
        }
        .mui-navbar .mui-btn-nav {
            -webkit-transition: none;
            transition: none;
            -webkit-transition-duration: .0s;
            transition-duration: .0s;
        }
        .mui-navbar .mui-bar .mui-title {
            display: inline-block;
            width: auto;
        }
        .mui-page-shadow {
            position: absolute;
            right: 100%;
            top: 0;
            width: 16px;
            height: 100%;
            z-index: -1;
            content: '';
        }
        .mui-page-shadow {
            background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
            background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
        }
        .mui-navbar-inner.mui-transitioning,
        .mui-navbar-inner .mui-transitioning {
            -webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
            transition: opacity 300ms ease, transform 300ms ease;
        }
        .mui-page {
            display: none;
        }
        .mui-pages .mui-page {
            display: block;
        }
        .mui-page .mui-table-view:first-child {
            margin-top: 15px;
        }
        .mui-page .mui-table-view:last-child {
            margin-bottom: 30px;
        }
        .mui-table-view {
            margin-top: 20px;
        }

        .mui-table-view span.mui-pull-right {
            color: #999;
        }
        .mui-table-view-divider {
            background-color: #efeff4;
            font-size: 14px;
        }
        .mui-table-view-divider:before,
        .mui-table-view-divider:after {
            height: 0;
        }
        .head {
            height: 40px;
        }
        #head {
            line-height: 40px;
        }
        .head-img {
            width: 40px;
            height: 40px;
        }
        #head-img1 {
            position: absolute;
            bottom: 10px;
            right: 40px;
            width: 40px;
            height: 40px;
        }
        .update {
            font-style: normal;
            color: #999999;
            margin-right: -25px;
            font-size: 15px
        }
        .mui-fullscreen {
            position: fixed;
            z-index: 20;
            background-color: #000;
        }
        .mui-ios .mui-navbar .mui-bar .mui-title {
            position: static;
        }
        /*问题反馈在setting页面单独的css*/
        #feedback .mui-popover{
            position: fixed;
        }
        #feedback .mui-table-view:last-child {
            margin-bottom: 0px;
        }
        #feedback .mui-table-view:first-child {
            margin-top: 0px;
        }

        .mui-plus.mui-plus-stream .mui-stream-hidden{
            display: none !important;
        }
        .loginout{
            margin-top: 10%;
        }
        /*问题反馈在setting页面单独的css==end*/

    </style>
    <link rel="stylesheet" type="text/css" href="__FRONT__/css/feedback.css" />
</head>

<body class="mui-fullscreen">
<!--页面主结构开始-->
<div id="app" class="mui-views">
    <div class="mui-view">
        <div class="mui-navbar">
        </div>
        <div class="mui-pages">
        </div>
    </div>
</div>
<!--页面主结构结束-->
<!--单页面开始-->
<div id="setting" class="mui-page">
    <!--页面标题栏开始-->
    <div class="mui-navbar-inner mui-bar mui-bar-nav">
        <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
            <span class="mui-icon mui-icon-left-nav"></span>
        </button>
        <h1 class="mui-center mui-title">设置</h1>
    </div>
    <!--页面标题栏结束-->
    <!--页面主内容区开始-->
    <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <ul class="mui-table-view mui-table-view-chevron">
                    <li class="mui-table-view-cell mui-media">
                        <a class="mui-navigate-right" href="#account">
                            <img class="mui-media-object mui-pull-left head-img" id="head-img" src="">
                            <div class="mui-media-body">
                                {$userinfo['nickname']}
                                <p class='mui-ellipsis'>账号:{$userinfo['mobile']}</p>
                            </div>
                        </a>
                    </li>
                </ul>
                <ul class="mui-table-view mui-table-view-chevron">
                    <li class="mui-table-view-cell">
                        <a href="#notifications" class="mui-navigate-right">修改密码</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="#general" class="mui-navigate-right">通用</a>
                    </li>
                </ul>
                <ul class="mui-table-view mui-table-view-chevron">
                    <li class="mui-table-view-cell">
                        <a href="javascript:;" class="">
                            关于系统
                            <!--<i class="mui-pull-right update">V3.1.0</i>-->
                        </a>
                    </li>
                </ul>
                <div style="text-align: center" class='loginout'>
                    <a style="width: 80%" href="{:url('user/loginout')}" class="mui-btn mui-btn-success">退出登录</a>
                </div>
            </div>
        </div>
    </div>
    <!--页面主内容区结束-->
</div>
<!--单页面结束-->
<div id="account" class="mui-page">
    <div class="mui-navbar-inner mui-bar mui-bar-nav">
        <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
            <span class="mui-icon mui-icon-left-nav"></span>
        </button>
        <h1 class="mui-center mui-title">账号与安全</h1>
            <span></span>
    </div>
    <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">
                        <a id="head" class="mui-navigate-right">头像
                            <span class="mui-pull-right head">
									<img class="head-img mui-action-preview" id="head-img1" src=""/>
							</span>
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="#personal" class="mui-navigate-right">昵称<span style="margin-right: 20px" class="mui-pull-right">{$userinfo['nickname']}</span></a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a>账号<span class="mui-pull-right">{$userinfo['mobile']}</span></a>
                    </li>
                </ul>
                <!--<ul class="mui-table-view">-->
                    <!--<li class="mui-table-view-cell">-->
                        <!--<a>QQ号<span class="mui-pull-right">88888888</span></a>-->
                    <!--</li>-->
                    <!--<li class="mui-table-view-cell">-->
                        <!--<a>手机号<span class="mui-pull-right">18601234567</span></a>-->
                    <!--</li>-->
                    <!--<li class="mui-table-view-cell">-->
                        <!--<a>邮箱地址<span class="mui-pull-right">hbuilder@dcloud.io</span></a>-->
                    <!--</li>-->
                <!--</ul>-->
            </div>
        </div>
    </div>
</div>
<div id="personal" class="mui-page">
    <div class="mui-navbar-inner mui-bar mui-bar-nav">
        <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
            <span class="mui-icon mui-icon-left-nav"></span>
        </button>
        <h1 class="mui-center mui-title">昵称</h1>
        <button type="button" class="nick_edit mui-btn mui-btn-link mui-btn-nav mui-pull-right">
            <span style="font-size: 35px; margin-top: 5px" class="mui-icon mui-icon-checkmarkempty"></span>
        </button>
    </div>
    <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <ul class="mui-table-view">
                    <div class="mui-input-group">
                        <input type="text" class="mui-input-clear nick_name" placeholder="请输入修改的内容" value="{$userinfo['nickname']}">
                    </div>
                </ul>
            </div>
        </div>
    </div>
</div>
<div id="notifications" class="mui-page">
    <div class="mui-navbar-inner mui-bar mui-bar-nav">
        <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
            <span class="mui-icon mui-icon-left-nav"></span>
        </button>
        <h1 class="mui-center mui-title">修改密码</h1>
        <button type="button" class="pwd_edit mui-btn mui-btn-link mui-btn-nav mui-pull-right">
            <span style="font-size: 35px; margin-top: 5px" class="mui-icon mui-icon-checkmarkempty"></span>
        </button>
    </div>
    <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <div class="mui-input-group">
                    <div class="mui-input-row">
                        <label>用户名</label>
                        <input type="text" class="mui-input-clear" disabled placeholder="{$userinfo['mobile']}">
                    </div>
                    <div class="mui-input-row">
                        <label>原密码</label>
                        <input type="password" class="oldpass mui-input-password" placeholder="请输入原密码">
                    </div>
                    <div class="mui-input-row">
                        <label>新密码</label>
                        <input type="password" class="newpass mui-input-password" placeholder="请输入新密码">
                    </div>
                    <div class="mui-input-row">
                        <label>确认新密码</label>
                        <input type="password" class="renewpass mui-input-password" placeholder="请确认新密码">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="general" class="mui-page">
    <div class="mui-navbar-inner mui-bar mui-bar-nav">
        <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
            <span class="mui-icon mui-icon-left-nav"></span>设置
        </button>
        <h1 class="mui-center mui-title">通用</h1>
    </div>
    <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">
                        多语言
                    </li>
                </ul>

                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">
                        听筒模式
                        <div class="mui-switch mui-switch-mini">
                            <div class="mui-switch-handle"></div>
                        </div>
                    </li>
                </ul>
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">
                        功能
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

</body>
<script>
    $(function () {
        $('.nick_edit').click(function () {
            var nickname = $('.nick_name').val();
            $.post('{:url("setting/changeprofile")}',{'nickname':nickname},function (res) {
                if(res.code){
                    mui.toast('修改成功',{duration:'short'});
                    mui.back();
                }
            })
        })

        //修改密码
        $('.pwd_edit').click(function () {
            var oldpass = $('.oldpass').val();
            var newpass = $('.newpass').val();
            var renewpass = $('.renewpass').val();
        //    表单验证
            if(!oldpass || !newpass || !renewpass){
                mui.toast('请填写完整信息');
                return false;
            }
            if(oldpass.length < 6 || newpass.length < 6){
                mui.toast('密码不能少于6位');
                return false;
            }
            if(newpass !== renewpass){
                mui.toast('两次密码输入不一致');
                return false;
            }

            var params = {};
            params.oldpass = oldpass;
            params.newpass = newpass;
            params.renewpass = renewpass;

            $.post("{:url('setting/changepwd')}",params,function (res) {
                    if(res.code){
                        mui.toast(res.msg);
                        mui.back();
                    }else{
                        mui.toast(res.msg)
                    }
            })

        })


    })
</script>
<script>
    mui.init();
    //初始化单页view
    var viewApi = mui('#app').view({
        defaultPage: '#setting'
    });
    //初始化单页的区域滚动
    mui('.mui-scroll-wrapper').scroll();

    setTimeout(function () {
        defaultImg();
        setTimeout(function() {
            initImgPreview();
        }, 300);
    },500);


    var view = viewApi.view;
    (function($) {
        //处理view的后退与webview后退
        var oldBack = $.back;
        $.back = function() {
            if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
                viewApi.back();
            } else { //执行webview后退
                oldBack();
            }
        };
        //监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
        //第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
        view.addEventListener('pageBeforeShow', function(e) {
            //				console.log(e.detail.page.id + ' beforeShow');
        });
        view.addEventListener('pageShow', function(e) {
            //				console.log(e.detail.page.id + ' show');
        });
        view.addEventListener('pageBeforeBack', function(e) {
            //				console.log(e.detail.page.id + ' beforeBack');
        });
        view.addEventListener('pageBack', function(e) {
            //				console.log(e.detail.page.id + ' back');
        });
    })(mui);

    function defaultImg() {
        if(mui.os.plus){
            plus.io.resolveLocalFileSystemURL("_doc/head.jpg", function(entry) {
                var s = entry.fullPath + "?version=" + new Date().getTime();;
                document.getElementById("head-img").src = s;
                document.getElementById("head-img1").src = s;
            }, function(e) {
                document.getElementById("head-img").src = "{:$userinfo['portrait']?$userinfo['portrait']:config('headsrc')}";
                document.getElementById("head-img1").src = "{:$userinfo['portrait']?$userinfo['portrait']:config('headsrc')}";
            })
        }else{
            document.getElementById("head-img").src = "{:$userinfo['portrait']?$userinfo['portrait']:config('headsrc')}";
            document.getElementById("head-img1").src = "{:$userinfo['portrait']?$userinfo['portrait']:config('headsrc')}";
        }

    }
    document.getElementById("head-img1").addEventListener('tap', function(e) {
        e.stopPropagation();
    });

    function initImgPreview() {
        var imgs = document.querySelectorAll("img.mui-action-preview");
        imgs = mui.slice.call(imgs);
        if (imgs && imgs.length > 0) {
            var slider = document.createElement("div");
            slider.setAttribute("id", "__mui-imageview__");
            slider.classList.add("mui-slider");
            slider.classList.add("mui-fullscreen");
            slider.style.display = "none";
            slider.addEventListener("tap", function() {
                slider.style.display = "none";
            });
            slider.addEventListener("touchmove", function(event) {
                event.preventDefault();
            })
            var slider_group = document.createElement("div");
            slider_group.setAttribute("id", "__mui-imageview__group");
            slider_group.classList.add("mui-slider-group");
            imgs.forEach(function(value, index, array) {
                //给图片添加点击事件，触发预览显示；
                value.addEventListener('tap', function() {
                    slider.style.display = "block";
                    _slider.refresh();
                    _slider.gotoItem(index, 0);
                })
                var item = document.createElement("div");
                item.classList.add("mui-slider-item");
                var a = document.createElement("a");
                var img = document.createElement("img");
                img.setAttribute("src", value.src);
                a.appendChild(img)
                item.appendChild(a);
                slider_group.appendChild(item);
            });
            slider.appendChild(slider_group);
            document.body.appendChild(slider);
            var _slider = mui(slider).slider();
        }
    }

    if(mui.os.stream){
        document.getElementById("check_update").display = "none";
    }

</script>

</html>